<template>
	<van-grid v-if="!gridAllocation.isCustom" :column-num="gridAllocation.columnNum" :gutter="gridAllocation.gutter"
	:border="gridAllocation.border" :direction="gridAllocation.direction" :square="gridAllocation.square">
		<van-grid-item v-for="value of gridAllocation.data" 
		:dot="value.dot" :badge="value.badge"
		:key="value.text" :icon="value.icon" :text="value.text" :icon-color="value.iconColor"/>
</van-grid>
<van-grid v-else  :column-num="gridAllocation.columnNum" :gutter="gridAllocation.gutter"
	:border="gridAllocation.border" :direction="gridAllocation.direction" :square="gridAllocation.square">
		<van-grid-item v-for="value of gridAllocation.data" >
			<div class="picImg" :style="handleBgColor(value.bgColor,gridAllocation.columnNum)">
				<svg-icon :icon-class="value.icon" :color="value.iconColor"></svg-icon>
			</div>
			<div class="text">{{value.text}}</div>
		</van-grid-item>
</van-grid>

</template>
<script lang="ts" setup>
import {computed} from 'vue'
import { IgridConfig } from '@/typeings/home'

const props = defineProps<{gridConfiguration:IgridConfig}>()
const gridAllocation = computed(() => props.gridConfiguration);
const handleBgColor = (bgColor:string | object,columnNum:number):Object[] =>{
	if(typeof bgColor ==='string'){
	return [
		{	backgroundColor:bgColor},
		{	width: 100/columnNum +'px'},
		{height:  100/columnNum +'%'}
		]
	}else{
		return[
			{backgroundImage: `linear-gradient(to bottom right,${bgColor.fontColor}, ${bgColor.backColor})`},
			{width: 100/columnNum*2.5 +'px'},
			{height:  100/columnNum*2.5 +'px'}
		] 
		
	}

	
}
</script>
<style scoped lang="scss">
@import '@/styles/viriables.scss';
.picImg{
	border-radius: 50%;
	box-shadow: 0 4px 6px rgba($color: #000000, $alpha:0.28);
	margin-bottom: 5px;
}
.text{
	font-size: $fnSize12;
	line-height: 28px;
	color:$content-font-color
}
</style>